<!-- 游戏详情 -->
<template>
  <el-dialog
    :model-value="dialogFormVisible"
    :destroy-on-close="true"
    title="盲盒列表"
    width="500px"
    @close="emits('closeDialog')"
  >
    <el-form ref="dialogFormRef" :model="dialogForm" :rules="rules">
      <el-form-item label="盲盒名称" :label-width="formLabelWidth" prop="name">
        <el-input v-model="dialogForm.name" />
      </el-form-item>
      <el-form-item label="盲盒图片" :label-width="formLabelWidth">
        <el-upload :action="uploadimgUrl"
          :data="{ project_code: 'mobybox'}" :show-file-list="false" :limit="1" :headers="TOKENT_HEADER"
          class="avatar-uploader" :on-success="handleUploaderImage1Success" 
        >
          <img v-if="dialogForm.image1" :src="dialogForm.image1_show" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="分类ID" :label-width="formLabelWidth" prop="category_id">
        <el-input v-model="dialogForm.category_id" />
      </el-form-item>
      <el-form-item label="稀有数量" :label-width="formLabelWidth" prop="rare_quantity">
        <el-input v-model="dialogForm.rare_quantity" />
      </el-form-item>
      <el-form-item label="总数量" :label-width="formLabelWidth" prop="total_quantity">
        <el-input v-model="dialogForm.total_quantity" />
      </el-form-item>
      <el-form-item label="钻石数量" :label-width="formLabelWidth" prop="diamond_quantity">
        <el-input v-model="dialogForm.diamond_quantity" />
      </el-form-item>
      <el-form-item label="排序数字" :label-width="formLabelWidth">
        <el-input v-model="dialogForm.rank" value="0" />
      </el-form-item>
      <el-form-item label="是否隐藏" :label-width="formLabelWidth">
          <el-select v-model="dialogForm.is_hide" placeholder="是否隐藏">
              <el-option label="否" :value="0" />
              <el-option label="是" :value="1" />
          </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="emits('cancel')">取消</el-button>
        <el-button
          type="primary"
          @click="submit(dialogForm)"
          :loading="btnLoading"
          >提交</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref } from "vue";
import { uploadimgUrl } from "@/api/system/uploadimg";
import { TOKENT_HEADER } from "@/config/api-constant/system";

const dialogFormRef = ref(null);
const btnLoading = ref(null)

defineProps({
    dialogFormVisible: {
        type: Boolean,
        default: false
    },
    dialogForm: {
        type: Object,
        default: {
            name: "",
            category_id: "",
            rare_quantity: "",
            total_quantity: "",
            diamond_quantity: "",
            rank: 0,
            is_hide: "",
            image1: "",
            image1_show: "",
        }
    }
});
const handleUploaderImage1Success = (res) => {
    emits("handleUploaderImgRequest", res, "image1", "image1_show");
};
const emits = defineEmits([
    "closeDialog",
    "cancel",
    "submitForm",
    "handleUploaderImgRequest",
    ]);
const rules = {
  name: [{ required: true, message: "请输入名称", trigger: "blur" }],
  rare_quantity: [{ required: true, message: "请输入稀有数量", trigger: "blur" }],
  total_quantity: [{ required: true, message: "请输入总数量", trigger: "blur" }],
  diamond_quantity: [{ required: true, message: "请输入钻石数量", trigger: "blur" }],
};
// 提交
const submit = (dialogForm) => {
    dialogFormRef.value
    .validate()
    .then(async () => {
        try {
            const param = { ...dialogForm };
            emits("submitForm", param);
        } catch (error) {
            return false;
//            console.log(error);
        }
    })
    .catch((error) => {
        return false;
        //console.log(error);
    });
};
const formLabelWidth = "120px";
</script>
